import { Toast } from 'antd-mobile'
import React from 'react'
import http from '../../../api'
import { CircleReplyList, UserList } from '../../../myTypes'
import Loading from '../../publicComponents/Loading'

export default function CommentItem(props: {
  getCommendData: any
  style: {
    readonly [key: string]: string
  }
  userInfo: UserList
  loveList: Array<string>
  reply: CircleReplyList
  accountId: string | undefined
  circleId: string | undefined
}) {
  const { style, reply, userInfo, loveList, getCommendData, accountId, circleId } = props

  async function delCommend(id: string) {
    Toast.show({
      content: '加载中...',
      maskClickable: false,
      duration: 0,
      icon: <Loading />
    })
    const data = await http('delete', '/mty/circleReply/del', { id })
    if (data && data.code === 200) {
      getCommendData()
    }
    Toast.clear()
  }

  async function toggleFabulous(isTrue: boolean, id: string) {
    Toast.show({
      content: '加载中...',
      maskClickable: false,
      duration: 0,
      icon: <Loading />
    })
    if (isTrue) {
      const data = await http('post', '/mty/circleReplyLove/del', {
        id: '',
        createTime: '',
        sonId: id,
        pid: '0',
        accountId,
        circleId
      })
      if (data && data.code === 200) {
        getCommendData()
      }
      Toast.clear()
    } else {
      const data = await http('post', '/mty/circleReplyLove/love', {
        id: '',
        createTime: '',
        sonId: id,
        pid: '0',
        accountId,
        circleId
      })
      if (data && data.code === 200) {
        getCommendData()
      }
      Toast.clear()
    }
  }

  return (
    <div className={style['comment-item']}>
      <div className={style['author-container']}>
        <div className={style['author-info']}>
          <div className={style['comment-author-head']}>
            <img src={userInfo.head} alt="" />
          </div>
          <div className={style['comment-author-info']}>
            <div className={style['author-nickname']}>
              <div className={style['nickname']}>{userInfo.name}</div>
              <div className={style['reply-container']}>
                <div className={style['comment-time']}>
                  {reply.createTime.slice(5, 10)}&nbsp;{reply.createTime.slice(11, 16)} 21:40
                </div>
                <div className={style['option']}>
                  <div className={style['reply']}>回复</div>
                  <div className={style['del-comment']} onClick={() => delCommend(reply.id)}>
                    删除
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={style['comment-content']}>{reply.content}</div>
      </div>
      <div className={style['fabulous']}>
        <div className={style['fabulous-icon']} onClick={() => toggleFabulous(loveList.indexOf(reply.id) !== -1, reply.id)}>
          {loveList.indexOf(reply.id) !== -1 && <img src="/static/user/icon-zan-00a.png" alt="" />}
          {loveList.indexOf(reply.id) === -1 && <img src="/static/user/icon-zan-9e9.png" alt="" />}
        </div>
        {loveList.indexOf(reply.id) !== -1 && <div className={style['fabulous-count']}>1</div>}
      </div>
    </div>
  )
}
